<template>
    <div>
      <div>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="班级号">
            <el-input v-model="formSearch.classid" placeholder="请输入班级号"></el-input>
          </el-form-item>
          <el-form-item label="专业名">
            <el-input v-model="formSearch.classname" placeholder="请输入专业名"></el-input>
          </el-form-item>
          <el-form-item label="级别">
            <el-input v-model="formSearch.grade" placeholder="请输入专业名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">查询</el-button>
            <el-button type="danger" @click="clearClick">清空</el-button>
            <el-button type="success" @click="addClick">添加班级</el-button>
          </el-form-item>
        </el-form>
      </div>
        <div>
          <el-table
              :data="tableData"
              stripe
              border
              style="width: 100%">
            <el-table-column
                prop="id"
                sortable
                label="ID">
            </el-table-column>
            <el-table-column
                prop="classid"
                sortable
                label="班级号">
            </el-table-column>
            <el-table-column
                prop="classname"
                sortable
                label="班级名">
            </el-table-column>
            <el-table-column
                prop="hover"
                sortable
                label="几班">
            </el-table-column>
            <el-table-column
                prop="grade"
                sortable
                label="级别">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
            >
              <template slot-scope="scope"  v-if="($store.state.user&&$store.state.user.admin_grade>1)">
                <el-button type="primary" plain @click="updateClick(scope.row)">编辑</el-button>
                <el-button type="danger" plain @click="deleteClick(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      <!--      添加-->
      <el-dialog title="添加班级"   :visible.sync="addFormVisible">
        <el-form :rules="rules" :model="addForm" label-position="right" ref="addForm" label-width="80px">
          <el-form-item label="班级号" prop="classid">
            <el-input  v-model="addForm.classid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="专业名" prop="classname">
            <el-input  v-model="addForm.classname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="几班" prop="hover">
            <el-input  type="number"  v-model="addForm.hover" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="级别" prop="grade">
            <el-input type="number"  v-model="addForm.grade" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserEvent">确 定</el-button>
        </div>
      </el-dialog>


      <!--        修改框-->
      <el-dialog title="编辑班级" :visible.sync="dialogFormVisible">
        <el-form :model="updateForm" label-position="right" label-width="80px">
          <el-form-item label="ID" >
            <el-input v-model="updateForm.id" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="班级号" prop="classid">
            <el-input  v-model="updateForm.classid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="专业名" prop="classname">
            <el-input  v-model="updateForm.classname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="几班" prop="hover">
            <el-input  type="number"  v-model="updateForm.hover" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="级别" prop="grade">
            <el-input type="number"  v-model="updateForm.grade" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserEvent">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {addClass, deleClass, editAdmin, editClass, getClass} from '@/request'
export default {
  name: "Class",
  data(){
    return {
      tableData:[],
      updateForm:{},
      dialogFormVisible:false,
      addFormVisible:false,
      formSearch:{
        classid:null,
        classname:null,
        grade:null,
      },
      addForm:{
        classid:null,
        classname:null,
        hover:null,
        grade:null,
      },
      rules: {
        classid: [
          {required: true, message: '请输入班级编号', trigger: 'blur'  },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        classname: [
          {required: true, message: '请输入专业名', trigger: 'blur'  },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ],
        hover: [
          {required: true, message: '请输入班号', trigger: 'blur'  }
        ],
        grade:[
          {required: true, message: '请输入级号', trigger: 'blur'  },
        ]
      }
    }
  },
  created() {
    this.getclass()
  },
  methods:{
    async getclass(){
      let data=await getClass(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data;
    },
    searchClick(){
      this.getclass()
    },
    clearClick(){
      this.formSearch={
        classid:null,
        classname:null,
        grade:null,
      }
      this.getclass()
    },
    addClick(){
      this.addFormVisible=true;
    },
    addUserEvent(){
      let that=this;
      this.$refs['addForm'].validate(async (valid)=>{
        if(!valid){
          return false;
        }
        let data=await addClass(that.addForm);
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('添加成功!');
        this.addFormVisible=false;
        this.getclass();
        this.addForm={
              classid:null,
              classname:null,
              hover:null,
              grade:null,
        }
      })
    },
    updateClick(item){
      this.dialogFormVisible=true;
      this.updateForm={
        id:item.id,
        classid:item.classid,
        classname:item.classname,
        hover:item.hover,
        grade:item.grade,
      };
    },
    async updateUserEvent(){
      let data=await editClass(this.updateForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getclass();
      this.dialogFormVisible=false;
    },
    deleteClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleClass({ids:[id]});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.getclass();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
}
</script>

<style scoped>

</style>